<template>
  <div class="container">
    <div class="waterfall-container">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="waterfall-item"
      >
        <div style="cursor: pointer" @click="getBlogInfo(item)">
          <el-image style="width: 100%" v-if="item.blogPicType == '0'" lazy :src="item.blogPicLink">
            <div slot="error" class="image-slot">
              <el-image src="/errorImg.jpg" fit="cover" class="blogPic">></el-image>
            </div>
          </el-image>
          <el-image style="width: 100%" v-if="item.blogPicType == '1'" lazy :src="envUrl + item.blogPic"></el-image>
          <div class="waterfall-content">
            <div class="content-title">{{ item.title }}</div>
            <h5 class="content-blogDesc">{{ item.blogDesc}}</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="paginationList">
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" background layout="prev, pager, next" @pagination="getBlogList"  style="margin-bottom: 30px;float: right;margin-right: 10px;"/>
    </div>
  </div>
</template>

<script>
import {cmsListBlog} from "@/api/cms/blog";
import {
  Loading
} from 'element-ui';

export default {
  name: "index",
  data() {
    return {
      items: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 3,
      },
    }
  },
  mounted() {
    this.getBlogList();
  },
  computed: {
    envUrl() {
      return process.env.VUE_APP_BASE_API
    }
  },
  methods: {
    getBlogList() {
      cmsListBlog(this.queryParams).then(response => {
        this.items = response.rows;
        this.total = response.total;
      }).finally(()=>{

      });
    },
    getBlogInfo(item) {
      this.$router.push({
        path: '/blogDetail',
        query: {
          id: item.id,
          title: item.title,
          desc: item.createTime
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  .waterfall-container {
    margin-top: 7.5em;
    margin-bottom: 7.5em;
    width: 1140px;
    column-count: 2; /* 定义列数 */
    column-gap: 20px; /* 列与列之间的间隔 */
    padding: 10px;
    box-sizing: border-box;
  }

  .waterfall-item {
    break-inside: avoid; /* 防止内容被拆分到不同的列中 */
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
  }

  .waterfall-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .waterfall-content {
    padding: 10px;
    .content-title {
      font-weight: normal;
      text-decoration: none;
      color: #666666;
    }
    .content-blogDesc {
      min-height: 1em;
      font-weight: 600px;
    }
  }
}
.paginationList {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
